<template>
  <div class="header">
    <div class="info">
      <el-icon><PartlyCloudy /></el-icon>
      <p class="boxDate">{{ weatcherData.tem }}℃</p>
      <p class="boxTime">| {{ dateDay }} |</p>
      <p class="boxDate">{{ dateYear }}</p>
    </div>
    <div class="top-middle">
      <div class="title">金港街道柏林村</div>
      <img
        v-if="info === '数字党建'"
        src="../assets/MainTop-line2.png"
        style="height: 0.5rem"
      />
      <img v-else src="../assets/MainTop-line.png" style="height: 0.5rem" />
      <div class="subhead">数字孪生管理平台</div>
      <div class="comment">Shu Zi Luan Sheng Guan Li Ping Tai</div>
    </div>
    <div class="right">
      <div
        class="exit-button"
        :class="{ 'new-background': info === '数字党建' }"
        @mouseover="changeColor"
        @mouseout="restoreColor"
        :style="{ cursor: cursorStyle }"
      >
        <p
          :style="{ color: textColor }"
          style="
            margin-top: 0.5rem;
            margin-left: 2rem;
            font-size: 0.9rem;

            font-weight: 400;
            line-height: 1rem;
          "
        >
          退出
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import axios from "axios";
export default {
  props: {
    info: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      cursorStyle: "default",
      textColor: "white",
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weatcherData: [],
      weekday: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      timer: null,
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log("info", this.info);
      const date = dayjs(new Date());
      this.dateDay = date.format("HH:mm:ss");
      this.dateYear = date.format("YYYY年MM月DD日");
      this.dateWeek = date.format(this.weekday[date.day()]);
    }, 1000); //每秒一次
    this.getWeather();
    this.timer = setInterval(() => {
      this.getWeather();
    }, 1000 * 60 * 60); //每小时调用一次
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    changeColor() {
      this.textColor = "aqua";
      this.cursorStyle = "pointer";
    },
    restoreColor() {
      this.textColor = "aliceblue"; // 还原为原来的颜色
    },
    getWeather() {
      // 第三方天气api接口
      axios
        .get("https://v1.yiketianqi.com/api", {
          params: {
            unescape: "1",
            appid: "43656176",
            appsecret: "I42og6Lm",
            // version: 'v91'
          },
        })
        .then((res) => {
          console.log(res.data.data);
          if (res.data) {
            this.weatcherData = res.data.data[0];
            console.log(this.weatcherData.tem);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info,
.top-middle,
.right {
  flex: 1;
}
.info {
  display: flex;
  font-size: 1rem;

  font-weight: 400;
  color: #ffffff;
  line-height: 1.1rem;
}
.top-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.right {
  position: relative;
}
.exit-button {
  width: 4.6rem;
  height: 2rem;
  position: absolute;
  right: 3rem;
  border: none;
  background: transparent url("../assets/Exit-main.png") no-repeat center;
  /* background-image: url("../assets/Exit-main.png"); */
  background-size: 100% 100%;
}
.new-background {
  width: 4.6rem;
  height: 2rem;
  position: absolute;
  right: 3rem;
  border: none;
  background: transparent url("../assets/Exit-main2.png") no-repeat center;
  /* background-image: url("../assets/Exit-main.png"); */
  background-size: 100% 100%;
}
.exit-button:active {
  background-color: transparent; /* 点击时背景透明 */
  border: none; /* 点击时取消边框 */
}
.custom-button:focus {
  background-color: transparent;
  border: none; /* 鼠标在上面取消边框 */
}
.exit-button:hover {
  background-color: transparent;
  border: none; /* 鼠标在上面取消边框 */
}

.title {
  margin-left: 0.5rem;
  letter-spacing: 1rem;
  font-size: 2.38rem;
  font-family: Source Han Sans SC;
  font-weight: 800;
  color: #ffffff;
}
.subhead {
  margin-left: 1.2rem;
  letter-spacing: 1.56rem;
  font-size: 1.87rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
}
.comment {
  letter-spacing: 0.3rem;
  font-size: 0.8rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
}
</style>
